{include file="public:head" /}
{include file="public:footer" /}

<div class="content">
    <div class="slide-banner" data-trackid="首页-焦点图">
        <div class="swiper-wrapper">
            {volist name="banner" id="vo"}
            <div class="swiper-slide"><a href="banner/to?type={$vo.type}&key_word={$vo.key_word}" data-trackid="首页-焦点图-{$vo.id}"><div class="ware-img ui-imglazyload" data-url="{$vo.img.url}"></div></a></div>
            {/volist}
        </div>
        <div class="swiper-pagination"></div>
    </div><!-- //焦点图结束 -->

    <div class="menu flex">
        <a class="item cell" href="javascript:;" onclick="javascript:a();" data-trackid="首页-快速入口-1"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/sjxm.png"></div></span>手机数码</a>
        <a class="item cell" href="/beauty_list" data-trackid="首页-快速入口-2"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/ppmz.png"></div></span>品牌美妆</a>
        <a class="item cell" href="/deputy_list" data-trackid="首页-快速入口-3"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/nfcp.png"></div></span>农副产品</a>
        <a class="item cell" href="/clothing_list" data-trackid="首页-快速入口-4"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/fzcp.png"></div></span>服装产品</a>
    </div>
    <div class="menu flex">
        <a class="item cell" href="/sale_list" data-trackid="首页-快速入口-1"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/yyxg.png"></div></span>永远限购</a>
        <a class="item cell" href="/supermarket_list" data-trackid="首页-快速入口-2"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/shcs.png"></div></span>生活超市</a>
        <a class="item cell" href="/presale_list" data-trackid="首页-快速入口-3"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/hdys.png"></div></span>本地预售</a>
        <a class="item cell" href="/missyou_list" data-trackid="首页-快速入口-4"><span class="icon"><div class="ware-img ui-imglazyload" data-url="__STATIC__/images/xnsx.png"></div></span>想你所想</a>
    </div>
    <!-- //主菜单 -->

    <div class="cate-swiper mt" data-trackid="首页-品类">
        <div class="swiper-title" id="theme_title">
            <div class="swiper-wrapper">
                {volist name="theme" id="vo" key="k"}
                {if condition = "$k eq $max_theme"}
                <div class="swiper-slide active" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
                {else /}
                <div class="swiper-slide" id="slide{$vo.id}" data-id="{$vo.id}" data-load="0">{$vo.name}</div>
                {/if}
                {/volist}

            </div>
        </div>
        <div class="swiper-container list list-view" id="container_id" >
            <div class="swiper-wrapper">
                {volist name="theme" id="vo" key="k"}
                <div class="swiper-slide" data-trackid="{$vo.id}">
                    <ul data-trackid="{$vo.id}">
                    
                    </ul>
                </div>
                {/volist}
            </div>
        </div>
    </div><!-- //首页品类结束 -->


</div>
<script src="__STATIC__/js/zepto.min.js"></script>
<script src="__STATIC__/js/base.min.js"></script>
<script src="__STATIC__/js/swiper.js"></script>
<script src="__STATIC__/js/tab.js"></script>
<script src="__STATIC__/js/shopin.js"></script>
<script>
    //焦点图
    var mySwiper = new Swiper ('.slide-banner', {
        pagination: '.swiper-pagination',
        autoplay: 3000,
        autoplayDisableOnInteraction: false
    });
        var titSwiper;
        var conSwiper; 
    //分类swiper
        // function a(){
        //     jQuery.ajax({
        //         type : "get",
        //         dataType : 'json',
        //             url : "/digital_list",
        //             async : true,
        //         success:function(data){
        //                 console.log(data);
        //                  $('#theme_title .swiper-wrapper').html('');
        //                  $('#container_id .swiper-wrapper').html('');
        //                 for (var i = 0 ; i< data.length ; i++) {
        //                     // <div class="swiper-slide" data-trackid="{$vo.id}">
        //                     // <ul data-trackid="{$vo.id}">
        //                     // </ul>
        //                     // </div>
        //                     var div = '<div class="swiper-slide" data-trackid="'+data[i]['id']+'"><ul data-trackid="'+data[i]['id']+'"></ul></div>';
        //                     $('#container_id .swiper-wrapper').append(div);
        //                     if(i == 0) {
        //                          var bb = '<div class="swiper-slide swiper-slide-active active" id="'+data[i]['id']+'" '+data[i]['id']+' data-load="0" style="width: 92px;">'+data[i]['name']+'</div>';
                                 
        //                          var info_arr = data[i].products;
        //                          for(var j = 0; j < info_arr.length; j++) {
        //                             console.log(info_arr[j].member_price);
        //                             $('#theme_title').click(function(){
        //                                 console.log(info_arr[j].member_price);
        //                                  $(this).addClass('active').siblings().removeClass('active')
        //                                 var info = '<li><a class="list-item" href="/product/info.html?id="" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+ info_arr[j].url+'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' +  info_arr[j].name + '</h3><p class="discount" style="width: 165px;padding-top: 20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' + info_arr[j].price + '(市场价)&nbsp;&nbsp;&nbsp;<em class="n">'+  info_arr[j].member_price + '(会员价)</em></span></p></div></div></a></li>';
        //                                 $('#container_id .swiper-wrapper ul[data-trackid="' + data[j]['id'] + '"]').append(info);
        //                             })
                                    
        //                          }
        //                      } else {
        //                         var bb = '<div class="swiper-slide swiper-slide-next" id="'+ 'slide' +data[i]['id']+'" data-id='+data[i]['id']+' data-load="0" style="width: 92px;">'+data[i]['name']+'</div>';
        //                     }  
        //                     $('#theme_title .swiper-wrapper').append(bb);
        //                     // $(document).on('click', '.swiper-slide', function(){
        //                     //     var aa = this.getAttribute('key');
        //                     //    
        //                     //     m = data[aa]['products'];
        //                     //     // console.log(data[aa]['products'].['url']);
        //                     //     for ( var j in m) { 
        //                     //         $('.swiper-slide ul').html('');
        //                     //         var li = document.createElement('li');
        //                     //         li.innerHTML = '<a class="list-item" href="/product/info.html?id="" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+  data[aa]['products'][j].url +'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' +  data[aa]['products'][j].name + '</h3><p class="discount" style="width: 165px;padding-top: 20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' +  data[aa]['products'][j].price + '(市场价)&nbsp;&nbsp;&nbsp;<em class="n">'+ data[aa]['products'][j].member_price + '(会员价)</em></span></p></div></div></a>';

        //                     //         var li = '<li><a href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><img src="' + data.products[i].url + '" class="swiper-lazy swiper-lazy-loaded" data-src-string="' + data.products[i].url + '"><span class="ellipsis">' + data.products[i].name + '</span></a></li>';
        //                     //         $('#container_id div ul[data-trackid="' + data[i] + '"]').append(li);
        //                     //     }
        //                     // })
        //                 }
        //         },
        //         error:function(error){
        //             //异常处理；
        //             console.log(error);
        //         }
        //     });
        // }

    function goLocation(i){
        conSwiper.slideTo(i, 300, function(){});
        setClass(i);
    }
    var titSwiper = new Swiper('.swiper-title', {
        slidesPerView: 4.5
    });

    var conSwiper = new Swiper('.swiper-container', {
        pagination : '.pagination',
        preloadImages: false,
        lazyLoading: true
    });
    conSwiper.params.onSlideChangeEnd = function(){
        var index = conSwiper.activeIndex;
        var prevIndex = conSwiper.previousIndex;
        if (index > prevIndex){
            titSwiper.slideTo(index, 300, function() {});
            var slidleft = $("#slide" + index).offset().left;
            var slidwidth = $("#slide" + index).width();
            setClass(index);
        }else{
            titSwiper.slideTo(index, 300, function() {});
            setClass(index);
        };
    };
    $(".swiper-title").find('.swiper-slide').each(function(index, el) {
        $(el).on('click', function(){
            goLocation(index);
        });
    });
    function setClass(i) {
        $(".swiper-title").find('.swiper-slide').each(function(index, el) {
            if (index != i) {
                if ($(el).hasClass("active")) {
                    $(el).removeClass("active");
                }
            } else {
                $(el).addClass("active");
            }
        });
    };

    //选项卡
    $(".tab-wrapper").tab();
</script>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>
    $.noConflict();
    function getInfo(that, theme_id) {
        if(that.attr('data-load') == 1) {
            // 已经加载过
            jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
            jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
            var img_list = jQuery('#container_id div[data-trackid="' + theme_id + '"] img');
            for (var i = 0; i < img_list.length; i++) {
                var src = img_list[i].dataset.srcString;
                jQuery(img_list[i]).attr('data-src', src);
            }
        } else {
            jQuery.ajax({
                type : "get",
                dataType : 'json',
                data:{
                    id : theme_id
                },
                url : "/theme_product",
                async : true,
                success:function(data){
                    var data = data.data;
                    if(data.products){
                        that.attr('data-load', 1);
                        jQuery('#container_id div ul li').find(".swiper-lazy-loaded").removeClass('swiper-lazy-loaded');
                        jQuery('#container_id ul[data-trackid="' + theme_id + '"]').empty();
                        jQuery('#container_id div[data-trackid="' + theme_id + '"]').addClass('swiper-slide-active');
                        for (var i = 0; i < data.products.length; i++) {
                            var li ='<li><a class="list-item" href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+ data.products[i].url +'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' + data.products[i].name + '</h3><p class="discount" style="width: 165px;padding-top: 20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' + data.products[i].price + '(市场价)&nbsp;&nbsp;&nbsp;<em class="n">'+ data.products[i].member_price + '(会员价)</em></span></p></div></div></a></li>';

                            // var li = '<li><a href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><img src="' + data.products[i].url + '" class="swiper-lazy swiper-lazy-loaded" data-src-string="' + data.products[i].url + '"><span class="ellipsis">' + data.products[i].name + '</span></a></li>';
                            jQuery('#container_id div ul[data-trackid="' + theme_id + '"]').append(li);
                        }
                    }
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
    }
            //分类swiper
        function a(){
            jQuery.ajax({
                type : "get",
                dataType : 'json',
                    url : "/digital_list",
                    async : true,
                success:function(data){
                        console.log(data);
                         $('#theme_title .swiper-wrapper').html('');
                         $('#container_id .swiper-wrapper').html('');
                        for (var i = 0 ; i< data.length ; i++) {
                            // <div class="swiper-slide" data-trackid="{$vo.id}">
                            // <ul data-trackid="{$vo.id}">
                            // </ul>
                            // </div>
                            var div = '<div class="swiper-slide" data-trackid="'+data[i]['id']+'"><ul data-trackid="'+data[i]['id']+'"></ul></div>';
                            $('#container_id .swiper-wrapper').append(div);
                            if(i == 0) {
                                 var bb = '<div class="swiper-slide swiper-slide-active active" id="'+data[i]['id']+'" data-id="'+data[i]['id']+'"data-load="0" style="width: 92px;">'+data[i]['name']+'</div>';
                                 
                                 var info_arr = data[i].products;
                                 for(var j = 0; j < info_arr.length; j++) {
                                    // $('#theme_title').click(function(){
                                          // $(this).addClass('active').siblings().removeClass('active');
                                         
                                        var info = '<li><a class="list-item" href="/product/info.html?id="'+ info_arr[j].id+'" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+ info_arr[j].url+'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' +  info_arr[j].name + '</h3><p class="discount" style="width: 165px;padding-top: 20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' + info_arr[j].price + '(市场价)&nbsp;&nbsp;&nbsp;<em class="n">'+  info_arr[j].member_price + '(会员价)</em></span></p></div></div></a></li>';
                                        $('#container_id .swiper-wrapper ul[data-trackid="' + data[j]['id'] + '"]').append(info);
                                    // })
                                    
                                 }
                             } else {
                                var bb = '<div class="swiper-slide swiper-slide-next" id="'+ 'slide' +data[i]['id']+'" data-id='+data[i]['id']+' data-load="0" style="width: 92px;">'+data[i]['name']+'</div>';
                            }  
                            $('#theme_title .swiper-wrapper').append(bb);
                            // $(document).on('click', '.swiper-slide', function(){
                            //     var aa = this.getAttribute('key');
                            //    
                            //     m = data[aa]['products'];
                            //     // console.log(data[aa]['products'].['url']);
                            //     for ( var j in m) { 
                            //         $('.swiper-slide ul').html('');
                            //         var li = document.createElement('li');
                            //         li.innerHTML = '<a class="list-item" href="/product/info.html?id="" data-trackid="首页-品类一-1"><div class="p"><img class="p-pic" src="'+  data[aa]['products'][j].url +'"></div><div class="d"><h3 class="d-title clamp" style="height: 22px">' +  data[aa]['products'][j].name + '</h3><p class="discount" style="width: 165px;padding-top: 20px;"><img style="width: 100%;" src="__STATIC__/images_old/img/zpbz.png" /></p><div class="d-main"><p class="price"><span class="s">￥' +  data[aa]['products'][j].price + '(市场价)&nbsp;&nbsp;&nbsp;<em class="n">'+ data[aa]['products'][j].member_price + '(会员价)</em></span></p></div></div></a>';

                            //         var li = '<li><a href="/product/info.html?id=' + data.products[i].id + '" data-trackid="首页-品类一-1"><img src="' + data.products[i].url + '" class="swiper-lazy swiper-lazy-loaded" data-src-string="' + data.products[i].url + '"><span class="ellipsis">' + data.products[i].name + '</span></a></li>';
                            //         $('#container_id div ul[data-trackid="' + data[i] + '"]').append(li);
                            //     }
                            // })
                        }
                        jQuery('#theme_title div div').click(function(){
                            var that = jQuery(this);
                            var theme_id = that.attr('data-id');
                            getInfo(that, theme_id);
                            $(this).addClass('active').siblings().removeClass('active');

                        })
                },
                error:function(error){
                    //异常处理；
                    console.log(error);
                }
            });
        }
    jQuery('#theme_title div div').click(function(){
        var that = jQuery(this);
        var theme_id = that.attr('data-id');
        getInfo(that, theme_id);
    })
    $('#slide{$max_theme}').click();
</script>
</body>
</html>